import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, DatePicker, Row, Col } from 'antd';
import React from 'react';
import styles from './style.less'
import moment from 'moment';

const ScrapListForm = props => {
  const { scrapListVisible, form, onCancel, onSubmit: handleAddScrap } = props;
  

  // 表单格式
  const layout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };

  // 确认
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleAddScrap(fieldsValue)
    });
  };

  return (
    <>
      <Modal
        className={styles.scrapListForm}
        title={[
          <div key="title">生成遗失物品报废清单</div>
        ]}
        visible={scrapListVisible}
        onOk={okHandle}
        onCancel={() => onCancel()}
      >
        <Row>
          <Col span={24}>
            <Form.Item
              label="报废年月"
              {...layout}
            >
              {form.getFieldDecorator('yearMonth', {
                rules: [
                  {
                    required: true,
                    message: '请选择报废年月'
                  },
                ],
                initialValue: moment()
              })(<DatePicker.MonthPicker />)}
            </Form.Item>
          </Col>
        </Row>
      </Modal>
    </>
  );
};

export default Form.create()(ScrapListForm);
